<template>
    <div class=''>
        <el-form :model="form" v-if="ishow" label-width="110px" ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="老房间">
                        <!-- <el-input v-model="roomId" :readonly="true"/> -->
                        <el-select v-model="roomId" placeholder="请选择新进入房间" :disabled="true">
                            <el-option v-for="item in RoomList" :key="item.roomId" :label="item.roomName"
                                :value="item.roomId" />
                            <!-- :disabled="item.isUsing" -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新进入房间" required prop="newroomid">
                        <el-select v-model="form.newroomid" placeholder="请选择新进入房间">
                            <el-option v-for="item in RoomList" :key="item.roomId" :label="item.roomName"
                                :value="item.roomId" :disabled="item.isUsing" />
                            <!-- :disabled="item.isUsing" -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="更换原因" required prop="reason">
                        <el-input type="textarea" :rows="3" resize="none" v-model="form.reason" />
                    </el-form-item>
                </el-col>
                <el-col :span="21">
                </el-col>
                <el-col :span="3" class="mb-5 mt-5">
                    <el-button type="primary" @click="submitHandle">保存</el-button>
                </el-col>
                <el-col :span="24">
                    <el-table ref="TableDataRef" :data="TableData" show-overflow-tooltip style="width: 100%;" border>
                        <el-table-column prop="oldRoomName" label="老房间" />
                        <el-table-column prop="newRoomName" label="新房间" />
                        <el-table-column prop="oldroomstartdate" label="老房间使用开始时间" width="170" />
                        <el-table-column prop="oldroomenddate" label="老房间使用结束时间" width="170" />
                        <el-table-column prop="changedate" label="更换时间" />
                        <el-table-column prop="reason" label="更换理由" />
                    </el-table>
                    <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum"
                        :total="total" @pagination="TableDataLists" />
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
import { getCurrentInstance, onMounted } from "vue";
import { ApplyDetailInfo, changeRoom, RoomChangeRecordList } from "@/api/ApplyDetail/ApplyDetail";
import { getUserProfile } from "@/api/system/user";
import { roomStateList } from "@/api/BAApply/BAApply";
import PageEnum from "@/enum/PageEnum.js";


const { proxy } = getCurrentInstance()
const { nj_sex, nj_sheanren_type, sys_yes_no } = proxy.useDict('nj_sex', 'nj_sheanren_type', 'sys_yes_no')


const ishow = ref(false)
const AreaTypeValue = ref()
const TableData = ref()
const total = ref(0)
const roomId = ref('')

const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const props = defineProps({
    data: {
        type: Object,
        required: true, // 如果这个属性是必需的
    },
    AreaType: {
        type: String,
        required: true, // 如果这个属性是必需的
    },

})
const form = ref({
})
const RoomList = ref([])

const RoomqueryParams = ref({ unitId: null, policeAreaType: AreaTypeValue })
const Roompaging = ref({ pageNum: 1, pageSize: 99 })

const rules = {
    newroomid: [{ required: true, message: "新进入房间不能为空", trigger: "blur" }],
    reason: [{ required: true, message: "更换原因不能为空", trigger: "blur" }],
}
// 通知事件
const emit = defineEmits(['updataList'])

onMounted(() => {
    nextTick(() => {
        ishow.value = true
    })
    AreaTypeValue.value = props.AreaType
    getUserInfo()
    if (props.data && props.data.jw_applydetail_id) {
        // 调用接口获取使用房间明细列表
        getApplyDetailInfo(props.data.jw_applydetail_id);
        TableDataLists({ jwApplydetailId: props.data.jw_applydetail_id })
    }
})

// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        RoomqueryParams.value.unitId = res.data.unitId
        getroomStateLists()
    })
}
// 获取房间列表
const getroomStateLists = async () => {
    await roomStateList(RoomqueryParams.value, Roompaging.value).then(res => {
        // 使用 reduce 合并所有的 baseRoomList
        RoomList.value = res.data.reduce((acc, item) => {
            return acc.concat(item.baseRoomList);
        }, []);
    })
}

// 获取详情
const getApplyDetailInfo = async () => {
    await ApplyDetailInfo(props.data.jw_applydetail_id).then(res => {
        roomId.value = res.data.roomId
    })
}
// 获取房间使用明细列表
const TableDataLists = async (bodydata) => {
    await RoomChangeRecordList(bodydata).then(res => {
        TableData.value = res.rows
    })
}

defineExpose({ getUserInfo, getApplyDetailInfo })

/** 提交按钮 */
function submitHandle() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            const subdata = {
                jwApplydetailId: props.data.jw_applydetail_id,
                newroomid: form.value.newroomid,
                reason: form.value.reason,
            }
            changeRoom(subdata).then(res => {
                proxy.$modal.msgSuccess(`保存成功`)
                const bodydata = { jwApplydetailId: props.data.jw_applydetail_id }
                TableDataLists(bodydata)
                form.value.newroomid = ''
                form.value.reason = ''
                getApplyDetailInfo()
                getroomStateLists()

                emit('updataList', 'fromcomeInDetail', "来了老弟")
            })
        }
    });
}

</script>